<template>
  <div>
    <el-row>
      <el-col :offset="22">
        <el-button size="small" type="primary" @click="dialogVisible = true">新增选项</el-button>
        <!-- <el-button style="margin-left: 30px;" size="small" type="primary" @click="saveModify">保存</el-button> -->
      </el-col>
    </el-row>
    <el-form class="form" ref="dataForm" :model="dataForm">
      <el-form-item>
        <label>主诉</label>
        <el-divider></el-divider>
        <el-transfer
          v-model="dataForm.mainSuit"
          :data="onUseMainSuit"
          :titles="['使用中：', '已禁用：']"
          :button-texts="['使用','禁用 ']"
          @change="onMoveoff($event,'mainSuit')"
          target-order="push"
          class="transfer"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item>
        <label>过敏史</label>
        <el-divider></el-divider>
        <el-transfer
          v-model="dataForm.allergies"
          :data="onUseAllergies"
          :titles="['使用中：', '已禁用：']"
          :button-texts="['使用','禁用 ']"
          @change="onMoveoff($event,'allergies')"
          target-order="push"
          class="transfer"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item>
        <label>既往史</label>
        <el-divider></el-divider>
        <el-transfer
          v-model="dataForm.pastHistory"
          :data="onUsePastHistory"
          :titles="['使用中：', '已禁用：']"
          :button-texts="['使用','禁用 ']"
          @change="onMoveoff($event,'pastHistory')"
          target-order="push"
          class="transfer"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item>
        <label>急症类型</label>
        <el-divider></el-divider>
        <el-transfer
          v-model="dataForm.emergencyType"
          :data="onUseEmergencyType"
          :titles="['使用中：', '已禁用：']"
          :button-texts="['使用','禁用 ']"
          @change="onMoveoff($event,'emergencyType')"
          target-order="push"
          class="transfer"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item>
        <label>备注</label>
        <el-divider></el-divider>
        <el-transfer
          v-model="dataForm.remarks"
          :data="onUseRemarks"
          :titles="['使用中：', '已禁用：']"
          :button-texts="['使用','禁用 ']"
          @change="onMoveoff($event,'remarks')"
          target-order="push"
          class="transfer"
        >
        </el-transfer>
      </el-form-item>
    </el-form>

    <el-dialog
      title="新增选项"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules"
        style="width: 100%;border-bottom: 1px solid #F0F0EE;height: 500px;overflow: auto"
      >
        <el-col :span="8">
          <el-form-item prop="type" label="病史类型:">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in medicalType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="state" label="状态:">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :offset="4" :span="2">
          <el-button size="small" type="primary" @click="Addmedical('form')">添加选项</el-button>
        </el-col>
        <el-col :span="24">
          <el-divider></el-divider>
        </el-col>
        <el-col :span="24">
          <p v-for="(item,key) in tableDete" style="margin-left: 10px;font-size: 15px;margin-top: 10px">
            <!--列表-->
            <el-row>
              <el-col :span="6">
                <el-form-item label="病史类型:">
                  <el-input style="width: 60%;" disabled v-model="item.medicineType"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态:">
                  <el-input style="width: 60%;" disabled v-model="item.medicinestate"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="选项名称:" prop="genericname">
                  <el-input v-model="item.medicineName" style="width:68%; margin-left: 5px" />
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align: right">
                <el-form-item>
                  <el-button type="text" style="color: red;font-size: 16px;" @click="remove(item,key)">删除
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </p>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData('form')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {findHistoryManage, saveHistoryManage} from  '@/api/back-management/triage-manage/medicalHistory_management.js'
  export default {
    name: 'MedicalHistoryManage',
    components: {  },
    data() {
      return{
        /* 新增 */
        dialogVisible: false,
        medicalType:[{
          value:'主诉',
          label:'主诉'
        },{
          value:'过敏史',
          label:'过敏史'
        },{
          value:'既往史',
          label:'既往史'
        },{
          value:'急症类型',
          label:'急症类型'
        },{
          value:'备注',
          label:'备注'
        },],
        status:[{
          value:'使用',
          label:'使用'
        },{
          value:'禁用',
          label:'禁用'
        }],
        rules:{
          type: [
            { required: true, message: '请选择病史类型', trigger: 'change' },
          ],
          state: [
            { required: true, message: '请选择状态', trigger: 'change' },
          ]
        },
        form:{
          type:'',
          state:''
        },
        tableDete:[],
        /* 回显/修改 */
        onUseAllergies :[],
        onUseMainSuit :[],
        onUsePastHistory :[],
        onUseEmergencyType :[],
        onUseRemarks :[],
        /*-- end --*/
        //使用中数据
        useAllergies :[],
        useMainSuit :[],
        usePastHistory :[],
        useEmergencyType :[],
        useRemarks :[],
        // 绑定页面禁用数据
        dataForm:{
          id:0,
          allergies:[],
          pastHistory:[],
          mainSuit: [],
          emergencyType: [],
          remarks: [],
        },
        /* 用户信息 */
        userId: this.$store.getters.userId,
        hospitalId: this.$store.getters.hospitalId,
        apiToken: this.$store.getters.apiToken
      }
    },
    created() {
      this.findHistoryManage()
    },
    methods: {
      // 获取回显数据
      findHistoryManage(){
        let data = {
          hospitalId: this.hospitalId
        }
        findHistoryManage(data).then(res => {
          if(res.code === 0){
            this.dataForm.id = res.data[0].id
            let onUseAllergies = []
            let onUsePastHistory = []
            let onUseMainSuit = []
            let onUseEmergencyType = []
            let onUseRemarks = []
            if(res.data[0].onUseAllergies !== ''){
              res.data[0].onUseAllergies.split('<;>').forEach((item,index) => {
                if(item === '无' || item === '不详'){
                  onUseAllergies.push({
                    key:item,
                    label:item,
                    disabled: true
                  })
                }else{
                  onUseAllergies.push({
                    key:item,
                    label:item
                  })
                }
              })
            }
            if(res.data[0].onUsePastHistory !== ''){
              res.data[0].onUsePastHistory.split('<;>').forEach((item,index) => {
                if(item === '无' || item === '不详'){
                  onUsePastHistory.push({
                    key:item,
                    label:item,
                    disabled: true
                  })
                }else{
                  onUsePastHistory.push({
                    key:item,
                    label:item
                  })
                }
              })
            }
            if(res.data[0].onUseMainSuit !== ''){
              res.data[0].onUseMainSuit.split('<;>').forEach(item => {
                onUseMainSuit.push({
                  key:item,
                  label:item
                })
              })
            }
            if(res.data[0].onUseEmergencyType !== ''){
              res.data[0].onUseEmergencyType.split('<;>').forEach(item => {
                onUseEmergencyType.push({
                  key:item,
                  label:item
                })
              })
            }
            if(res.data[0].onUseRemarks !== ''){
              res.data[0].onUseRemarks.split('<;>').forEach(item => {
                onUseRemarks.push({
                  key:item,
                  label:item
                })
              })
            }
            if(res.data[0].disableAllergies !== ''){
              res.data[0].disableAllergies.split('<;>').forEach((item,index) => {
                onUseAllergies.push({
                  key:item,
                  label:item
                })
              })
              this.dataForm.allergies = res.data[0].disableAllergies.split('<;>')
            }
            if(res.data[0].disablePastHistory !== ''){
              res.data[0].disablePastHistory.split('<;>').forEach((item,index) => {
                onUsePastHistory.push({
                  key:item,
                  label:item
                })
              })
              this.dataForm.pastHistory = res.data[0].disablePastHistory.split('<;>')
            }
            if(res.data[0].disableMainSuit !== ''){
              res.data[0].disableMainSuit.split('<;>').forEach((item,index) => {
                onUseMainSuit.push({
                  key:item,
                  label:item
                })
              })
              this.dataForm.mainSuit = res.data[0].disableMainSuit.split('<;>')
            }
            if(res.data[0].disableEmergencyType !== ''){
              res.data[0].disableEmergencyType.split('<;>').forEach((item,index) => {
                onUseEmergencyType.push({
                  key:item,
                  label:item
                })
              })
              this.dataForm.emergencyType = res.data[0].disableEmergencyType.split('<;>')
            }
            if(res.data[0].disableRemarks !== ''){
              res.data[0].disableRemarks.split('<;>').forEach((item,index) => {
                onUseRemarks.push({
                  key:item,
                  label:item
                })
              })
              this.dataForm.remarks = res.data[0].disableRemarks.split('<;>')
            }
            this.onUseAllergies = onUseAllergies
            this.onUsePastHistory = onUsePastHistory
            this.onUseMainSuit = onUseMainSuit
            this.onUseEmergencyType = onUseEmergencyType
            this.onUseRemarks = onUseRemarks
            this.useAllergies = res.data[0].onUseAllergies
            this.useMainSuit = res.data[0].onUseMainSuit
            this.usePastHistory = res.data[0].onUsePastHistory
            this.useEmergencyType = res.data[0].onUseEmergencyType
            this.useRemarks = res.data[0].onUseRemarks
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },

      /* 修改使用/禁用状态 */
      onMoveoff(arr,type){
        switch(type){
          case "mainSuit":
            this.dataForm.mainSuit = arr
            break;
          case "allergies":
             this.dataForm.allergies = arr
            break;
          case "pastHistory":
            this.dataForm.pastHistory = arr
            break;
          case "emergencyType":
            this.dataForm.emergencyType = arr
            break;
          case "remarks":
            this.dataForm.remarks = arr
            break;
        }
				let data = {}
				let onUseAllergies = []
				let onUsePastHistory = []
				let onUseEmergencyType = []
				let onUseMainSuit = []
				let onUseRemarks = []
				let strAllergies = []
				let strPastHistory = []
				let strEmergencyType = []
				let strMainSuit = []
				let strRemarks = []
				this.onUseAllergies.forEach(item =>{
				  if(this.dataForm.allergies.indexOf(item.key) === -1){
				    onUseAllergies.push(item)
				  }
				})
				this.onUsePastHistory.forEach(item =>{
				  if(this.dataForm.pastHistory.indexOf(item.key) === -1){
				    onUsePastHistory.push(item)
				  }
				})
				this.onUseEmergencyType.forEach(item =>{
				  if(this.dataForm.emergencyType.indexOf(item.key) === -1){
				    onUseEmergencyType.push(item)
				  }
				})
				this.onUseMainSuit.forEach(item =>{
				  if(this.dataForm.mainSuit.indexOf(item.key) === -1){
				    onUseMainSuit.push(item)
				  }
				})
				this.onUseRemarks.forEach(item =>{
				  if(this.dataForm.remarks.indexOf(item.key) === -1){
				    onUseRemarks.push(item)
				  }
				})
				onUseAllergies.forEach(item =>{
				  strAllergies.push(item.key)
				})
				onUsePastHistory.forEach(item =>{
				  strPastHistory.push(item.key)
				})

				onUseEmergencyType.forEach(item =>{
				  strEmergencyType.push(item.key)
				})
				onUseMainSuit.forEach(item =>{
				  strMainSuit.push(item.key)
				})
				onUseRemarks.forEach(item =>{
				  strRemarks.push(item.key)
				})
				data.disableAllergies = this.dataForm.allergies.join('<;>')
				data.disableEmergencyType = this.dataForm.emergencyType.join('<;>')
				data.disableMainSuit = this.dataForm.mainSuit.join('<;>')
				data.disablePastHistory = this.dataForm.pastHistory.join('<;>')
				data.disableRemarks = this.dataForm.remarks.join('<;>')
				data.hospitalId = Number(this.hospitalId)
				data.id = this.dataForm.id
				data.onUseAllergies = strAllergies.join('<;>')
				data.onUseEmergencyType = strEmergencyType.join('<;>')
				data.onUseMainSuit = strMainSuit.join('<;>')
				data.onUsePastHistory = strPastHistory.join('<;>')
				data.onUseRemarks = strRemarks.join('<;>')
				saveHistoryManage(data).then(res =>{
				  if(res.code === 0){
				    this.$message.success('保存成功')
				    this.findHistoryManage()
				  }
				}).catch(err =>{
				  this.$message.error(err)
				})
      },

      // 修改保存
      saveModify(){

      },

      /* 新增 */
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      // 添加选项
      Addmedical(formname) {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            const obj = {}
            obj.medicineType = this.form.type
            obj.medicinestate = this.form.state
            obj.medicineName = ''
            this.tableDete.push(obj)
          }
        })
      },
      /* 添加选项删除*/
      remove(data, val) {
        this.tableDete.splice(val, 1)
      },
      // 保存
      saveData(formname) {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            let data = {}
            let useAllergies = []
            let useEmergencyType = []
            let useMainSuit = []
            let usePastHistory = []
            let useRemarks = []
            let disAllergies = []
            let disEmergencyType = []
            let disMainSuit = []
            let disPastHistory = []
            let disRemarks = []
            this.dataForm.allergies.forEach(sub => {
              if(sub){
                disAllergies.push(sub)
              }
            })
            this.dataForm.mainSuit.forEach(sub => {
              if(sub){
                disMainSuit.push(sub)
              }
            })
            this.dataForm.pastHistory.forEach(sub => {
              if(sub){
                disPastHistory.push(sub)
              }
            })
            this.dataForm.emergencyType.forEach(sub => {
              if(sub){
                disEmergencyType.push(sub)
              }
            })
            this.dataForm.remarks.forEach(sub => {
              if(sub){
                disRemarks.push(sub)
              }
            })
            this.tableDete.forEach(item => {
              if(item.medicineType === '过敏史'){
                if(item.medicinestate === '使用'){
                  useAllergies.push(item.medicineName)
                }else{
                  disAllergies.push(item.medicineName)
                }
              }else if(item.medicineType === '主诉'){
                if(item.medicinestate === '使用'){
                  useMainSuit.push(item.medicineName)
                }else{
                  disMainSuit.push(item.medicineName)
                }
              }else if(item.medicineType === '既往史'){
                if(item.medicinestate === '使用'){
                  usePastHistory.push(item.medicineName)
                }else{
                  disPastHistory.push(item.medicineName)
                }
              }else if(item.medicineType === '急症类型'){
                if(item.medicinestate === '使用'){
                  useEmergencyType.push(item.medicineName)
                }else{
                  disEmergencyType.push(item.medicineName)
                }
              }else if(item.medicineType === '备注'){
                if(item.medicinestate === '使用'){
                  useRemarks.push(item.medicineName)
                }else{
                  disRemarks.push(item.medicineName)
                }
              }
            })
            data.disableAllergies = disAllergies.join('<;>')
            data.disableEmergencyType = disEmergencyType.join('<;>')
            data.disableMainSuit = disMainSuit.join('<;>')
            data.disablePastHistory = disPastHistory.join('<;>')
            data.disableRemarks = disRemarks.join('<;>')
            data.hospitalId = Number(this.hospitalId)
            data.id = this.dataForm.id
            data.onUseAllergies = this.useAllergies ? useAllergies.concat(this.useAllergies).join('<;>') : useAllergies.join('<;>')
            data.onUseEmergencyType = this.useEmergencyType ? useEmergencyType.concat(this.useEmergencyType).join('<;>') : useEmergencyType.join('<;>')
            data.onUseMainSuit = this.useMainSuit ? useMainSuit.concat(this.useMainSuit).join('<;>') : useMainSuit.join("<;>")
            data.onUsePastHistory = this.usePastHistory ? usePastHistory.concat(this.usePastHistory).join('<;>') : usePastHistory.join('<;>')
            data.onUseRemarks = this.useRemarks ? useRemarks.concat(this.useRemarks).join('<;>') : useRemarks.join('<;>')
            saveHistoryManage(data).then(res =>{
              if(res.code === 0){
                this.$message.success('保存成功')
                this.findHistoryManage()
                this.tableDete = []
                this.$refs[formname].resetFields()
                this.dialogVisible = false
              }
            }).catch(err =>{
              this.$message.error(err)
            })
          } else {
            this.$message({
              message: '添加失败',
              type: 'error',
              customClass: 'zZindex'
            })
          }
        })
      },

    }
  }
</script>

<style scoped>
  .el-row{
    margin-bottom: 20px;
  }
  .div{
    margin-bottom: 10px;
  }
  .textDiv{
    width: 100%;
    height: 100px;
    border: 1px solid rgba(242, 242, 242, 1);
    border-radius: 5px;
  }
  .el-divider{
    background-color: #00b8d6;
    margin: 10px 0 20px 0;
  }

  .form >>> label{
    font-size: 16px;
    font-weight: 400;
  }

  .transfer >>> .el-transfer-panel {
    width: 42%;
  }

  .transfer >>> .el-transfer-panel__item.el-checkbox{
    float: left;
    width: 25%;
    margin-right: 0;
  }
</style>
